<template>
  <div>
    <div class="pics">
      <!-- 轮播图-->
      <div class="top">
        <el-carousel :interval="3000" height="400px" motion-blur>
          <el-carousel-item v-for="(image, index) in images" :key="index">
            <img
                :src="image.src"
                :alt="image.alt"
                class="carousel-image"
                @load="handleImageLoad(index)"
                @error="handleImageError(index)"
                height="500" width="100%"/>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!--  娱乐天地首页-->
    <div class="header">
      <h1 class="title" style="padding-left: 180px">娱乐天地</h1>
      <!--      登录之后右上角显示用户姓名-->
      <div v-if="sname">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <p>用户：{{ sname.replace(/"/g, '') }}</p>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <!--              具体的后面做，v-if根据身份不同看见的内容不同  也可以-->
            <el-dropdown-menu>
              <el-dropdown-item command="/home/amusement/showmsg">个人信息</el-dropdown-item>
              <el-dropdown-item command="/home/amusement/clubmember" v-if="team">
                我的社团
              </el-dropdown-item>
              <!--            <el-dropdown-item @click="logoutAndRedirect">退出登录</el-dropdown-item>-->
              <el-dropdown-item command="/">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <el-menu id="elmenubar"
             :router="true"
             :default-active="activeIndex2"
             class="el-menu-demo-nav"
             mode="horizontal"
             background-color="blanchedalmond"
             style="justify-content: center; padding: 0 20px;">
      <el-menu-item class="menuitem" index="/home" style="margin: 0 10px;">首页</el-menu-item>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          社团
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="/home/amusement/singhome">音乐</el-dropdown-item>
            <el-dropdown-item command="/home/amusement/sporthome">体育</el-dropdown-item>
            <el-dropdown-item command="/home/amusement/dancehome">舞蹈</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-menu-item class="menuitem" index="/home/amusement/teamannounce" style="margin: 0 10px;">活动公告</el-menu-item>
      <el-menu-item class="menuitem" index="/home/amusement/letwechat" style="margin: 0 10px;">校园聊天室</el-menu-item>
    </el-menu>

    <Singinghome></Singinghome>
    <Sporthome></Sporthome>
    <Dancehome></Dancehome>
  </div>
</template>

<script>
import * as Jason from "@vue/compiler-sfc";

export default {
  data() {
    return {
      sname: '',
      team:''
    };
  },
  mounted() {
    this.sname = JSON.parse(sessionStorage.getItem('loginUser')).sname;
    this.team = JSON.parse(sessionStorage.getItem('loginUser')).team;
  }
};
</script>

<script setup>
import {createRouter as $router, useRouter} from 'vue-router'
import Singinghome from "@/views/amusement/club/singclubs/Singinghome.vue";
import Sporthome from "@/views/amusement/club/sportclubs/Sporthome.vue";
import Dancehome from "@/views/amusement/club/danceclubs/Dancehome.vue";
import {ref} from "vue";
const logoutAndRedirect = () =>{
  // 在这里执行退出登录的逻辑，例如清除登录状态等
  this.sname = null;
  // 跳转到首页
  router.push('/');
}
const router = useRouter()

const handlePersonalInfoClick = () => {

  router.push('/home/amusement');
//   if (!useUserStoreRef.username) {
//     // 如果用户没有登录（即没有 username），跳转到登录页面
//     $router.push('/login');
//   } else {
//     // 如果用户是普通用户，跳转到普通用户的个人信息页面
//     $router.push('/userMessage');
//   }
};


const handleCommand = (command) => {
  router.push(command)
}

const images = ref([
  { src: require('../../assets/imgs/carousel5.jpg'), alt: 'Image 3' },
  { src: require('../../assets/imgs/carousel5.jpg'), alt: 'Image 2' },
  { src: require('../../assets/imgs/carousel5.jpg'), alt: 'Image 1' },
  { src: require('../../assets/imgs/carousel5.jpg'), alt: 'Image 4' }
]);
function handleImageLoad(index) { /* ... */ }
function handleImageError(index) { /* ... */ }
</script>


<style scoped>
.header {
  display: flex;
  justify-content: space-between; /* 将标题和按钮分散对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding: 10px; /* 可根据需要调整顶部间距 */
}

.title {
  text-align: center; /* 标题居中 */
  flex: 1; /* 让标题占据剩余空间 */
}

.login-button {
  margin-right: 0px; /* 调整按钮离边界的距离 */
}
.el-dropdown-link {
  cursor: pointer;
  color: black;
  display: flex;
  align-items: center;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
  padding: 8px 12px; /* 调整内边距以增加可点击区域 */
  cursor: pointer;
}

.el-dropdown-link:hover {
//background-color: #f0f0f0; /* 悬浮时的背景色 */
  background-color: darkgray; /* 悬浮时的背景色 */
  color: #1890ff; /* 悬浮时的字体色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 悬浮时的阴影效果 */
}
.pics{
  width: 90%;
  margin: 0 auto;
}
</style>